import { View, Text, Image, ScrollView, Input } from '@tarojs/components'
import { useLoad, usePageScroll } from '@tarojs/taro'
import { useState, useCallback } from 'react'
import TabBar from '../../components/TabBar'
import './index.css'
import { swiperData, productData } from '@/user/mockData'
import type { Product } from '@/types/product'
import CustomSwiper from '@/user/components/Swiper'
import SearchBar from '@/user/components/SearchBar'
import List from '@/user/components/List'

const navTabs = [
  { label: '特价' },
  { label: '首页' },
  { label: '秒送' },
  { label: '外卖' },
  { label: '新品' },
]

const recommendTabs = [
  '推荐', '心动购物季', '国家补贴', '电脑办公', '二三', '分类'
]

const categoryNav = [
  { icon: 'https://img.icons8.com/color/48/000000/flash-on.png', label: '秒杀' },
  { icon: 'https://img.icons8.com/color/48/000000/delivery.png', label: '京东快递' },
  { icon: 'https://img.icons8.com/color/48/000000/discount.png', label: '拍拍二手' },
  { icon: 'https://img.icons8.com/color/48/000000/law.png', label: '司法拍卖' },
  { icon: 'https://img.icons8.com/color/48/000000/home-page.png', label: '到家' },
  { icon: 'https://img.icons8.com/color/48/000000/box.png', label: '京东到家' },
]

const bannerList = [
  'https://img14.360buyimg.com/babel/s1180x940_jfs/t1/123456/1.jpg',
]

const gridList = [
  { title: '国家补贴×百亿补贴', price: '¥5120 补贴价', img: 'https://img14.360buyimg.com/n1/jfs/t1/1.jpg', tag: '国补' },
  { title: '生活服务', price: '', img: 'https://img14.360buyimg.com/n1/jfs/t1/2.jpg', tag: '保定' },
  { title: '9.9包邮', price: '¥19.8', img: 'https://img14.360buyimg.com/n1/jfs/t1/3.jpg' },
  { title: '1元特价', price: '¥9.9', img: 'https://img14.360buyimg.com/n1/jfs/t1/4.jpg' },
  { title: '直播低价', price: '¥1999', img: 'https://img14.360buyimg.com/n1/jfs/t1/5.jpg', tag: '直播' },
  { title: '主播精选', price: '', img: 'https://img14.360buyimg.com/n1/jfs/t1/6.jpg' },
]

const tabContentMock = {
  '特价': <View className='jd-tab-mock'><Text>特价专区内容</Text></View>,
  '首页': (
    <>
      {/* 推荐Tab */}
      <ScrollView className='jd-recommend-tabs' scrollX>
        {recommendTabs.map(tab => (
          <Text key={tab} className='jd-recommend-tab'>{tab}</Text>
        ))}
      </ScrollView>
      {/* 分类导航 */}
      <ScrollView className='jd-category-nav' scrollX>
        {categoryNav.map(item => (
          <View className='jd-category-item' key={item.label}>
            <Image className='jd-category-icon' src={item.icon} />
            <Text className='jd-category-label'>{item.label}</Text>
          </View>
        ))}
      </ScrollView>
      {/* Banner轮播 */}
      <ScrollView className='jd-banner-swiper' scrollX>
        {bannerList.map((img, idx) => (
          <Image className='jd-banner-img' src={img} key={idx} />
        ))}
      </ScrollView>
      {/* 宫格商品区 */}
      <View className='jd-grid-section'>
        {gridList.map((item, idx) => (
          <View className='jd-grid-item' key={item.title+idx}>
            <Image className='jd-grid-img' src={item.img} />
            <View className='jd-grid-info'>
              <Text className='jd-grid-title'>{item.title}</Text>
              {item.tag && <Text className='jd-grid-tag'>{item.tag}</Text>}
            </View>
            {item.price && <Text className='jd-grid-price'>{item.price}</Text>}
          </View>
        ))}
      </View>
    </>
  ),
  '秒送': <View className='jd-tab-mock'><Text>秒送专区内容</Text></View>,
  '外卖': <View className='jd-tab-mock'><Text>外卖专区内容</Text></View>,
  '新品': <View className='jd-tab-mock'><Text>新品专区内容</Text></View>,
}

export default function Index() {
  const [activeTab, setActiveTab] = useState('首页')
  const [page, setPage] = useState(1)
  const [loading, setLoading] = useState(false)
  const [displayProducts, setDisplayProducts] = useState<Product[]>([])

  const loadMore = useCallback(() => {
    if (loading) return
    setLoading(true)
    // 模拟加载更多数据
    const newData = productData.slice((page-1)*20, page*20)
    setDisplayProducts(prev => [...prev, ...newData])
    setPage(prev => prev + 1)
    setLoading(false)
  }, [page, loading])

  usePageScroll(() => {
    // 简单实现：每滚动到底部就加载更多
    const scrollHeight = document.documentElement.scrollHeight
    const scrollTop = document.documentElement.scrollTop
    const clientHeight = document.documentElement.clientHeight
    
    if (scrollTop + clientHeight >= scrollHeight - 50 && !loading) {
      loadMore()
    }
  })

  useLoad(() => {
    loadMore()
  })

  return (
    <View className='jd-index-container'>
      {/* 顶部导航栏 */}
      <View className='jd-top-navbar'>
        <View className='jd-nav-tabs'>
          {navTabs.map(tab => (
            <Text
              key={tab.label}
              className={`jd-nav-tab${activeTab === tab.label ? ' active' : ''}${tab.label === '外卖' ? ' highlight' : ''}`}
              onClick={() => setActiveTab(tab.label)}
            >
              {tab.label}
            </Text>
          ))}
        </View>
        <View className='jd-avatar-box'>
          <Image className='jd-avatar' src='https://img14.360buyimg.com/pop/jfs/t1/amazon.png' />
        </View>
      </View>
      {/* 搜索栏 */}
      <View className='jd-search-bar'>
        <Input className='jd-search-input' placeholder='xreal air2pro' />
        <Image className='jd-search-camera' src='https://img.icons8.com/ios-filled/50/000000/camera.png' />
        <View className='jd-search-btn'>搜索</View>
      </View>
      {/* 内容区：根据tab切换 */}
      <View className='jd-content-area'>
        {tabContentMock[activeTab]}
      </View>
      <TabBar />
    </View>
  )
}
